<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-03-31 10:26:22
 * @LastEditTime: 2022-04-18 15:24:22
 * @LastEditors: zhangwei 1405298045@qq.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/otherPage/TabbarCommonSearch.vue
 *  
-->
<template>
	<view class="layout" :class="{ isHistory: isHistory }" @click.prevent="changeIsFocus">
		<view class="layout-header">
			<view class="layout-header-left" @click.prevent.stop="blockCurrentEvent">
				<image src="@/static/icon/icon_home_search.png" />

				<input
					auto-blur
					hold-keyboard
					confirm-type="search"
					:focus="isFocus"
					v-model.trim="searchValue"
					:placeholder="placeholder"
					@blur="changeIsFocus"
					@confirm="getSearchProduct"
					placeholder-class="input-placeholder"
				/>

				<image v-show="isEmpty" @touchend.prevent.stop="emptySearch" src="@/static/icon/icon_search_delete.png" />
			</view>

			<view class="layout-header-right">
				<button @click="back">取消</button>
			</view>
		</view>

		<!-- 搜索历史 -->
		<view v-show="isHistory" class="layout-history">
			<view class="layout-history-title">
				<text>搜索历史</text>
				<image v-show="isHistoryData" @click.stop.prevent="changeHistoryData()" src="@/static/icon/icon_search_ashcan.png" />
			</view>

			<view class="layout-history-main">
				<template v-if="isHistoryData">
					<view
						:key="index"
						v-for="(label, index) in currentPageSearchHistoryList"
						@click="getSearchProduct(label)"
						class="layout-history-main-item"
					>
						{{ label }}
					</view>
				</template>

				<template v-else>
					<DistributionHint type="nomore" hintLabel="暂无搜索历史记录" />
				</template>
			</view>
		</view>

		<!-- 搜索产品结果 -->
		<view v-if="!isHistory" class="layout-product">
			<template v-if="isMaterial">
				<DistributionMaterial :isSkelett="isSkelett" :list="currentPagetList" />
			</template>
			<template v-else>
				<DistributionProduct :isSkelett="isSkelett" :list="currentPagetList" />
			</template>

			<DistributionHint :fixed="isHintStatus === 'nodata' && !isSkelett" :type="isHintStatus" />
		</view>
	</view>
</template>

<script>
import { getProductListNew } from '@/api';
import { mapGetters, mapMutations } from 'vuex';
import { formatCommissionsModel } from '@/utils';

import DistributionHint from '@/components/distributionHint';
import DistributionProduct from '@/components/distributionProduct';
import DistributionMaterial from '@/components/distributionMaterial';

const oneDayTime = 1000 * 60 * 60 * 24;

export default {
	name: 'ProductSearch',

	data() {
		return {
			isSkelett: true,
			isHistory: true,

			placeholder: '',
			searchValue: '',
			currentPagetList: [],

			isFocus: true,

			requestParams: {
				pageIndex: 1,
				pageSize: 10
			},

			isHintStatus: '', // nomore  nodata
			type: 'material' // home 首页 material 素材
		};
	},

	computed: {
		...mapGetters(['coordinate', 'currentSite', 'tandianSearchHistory', 'materialSearchHistory']),

		isEmpty() {
			const { searchValue } = this;

			return searchValue !== '';
		},

		isHistoryData() {
			const { currentPageSearchHistoryList } = this;

			return !!currentPageSearchHistoryList.length;
		},

		isMaterial() {
			const { type } = this;

			return type === 'material';
		},

		currentPageSearchHistoryList() {
			const { isMaterial, tandianSearchHistory, materialSearchHistory } = this;

			return isMaterial ? materialSearchHistory : tandianSearchHistory;
		}
	},

	onLoad(params) {
		const { target, type } = params;

		this.type = type;
		this.placeholder = target;
	},

	onReachBottom() {
		const {
			isHintStatus,
			requestParams: { pageIndex }
		} = this;

		if (isHintStatus) {
			return;
		}

		this.isHintStatus = 'loading';
		this.getSearchProductList(pageIndex + 1);
	},

	methods: {
		...mapMutations(['changeTandianSearchHistory', 'changeMaterialSearchHistory']),

		blockCurrentEvent() {
			return false;
		},

		back() {
			uni.navigateBack();
		},

		changeIsFocus() {
			uni.hideKeyboard();
			this.isFocus = false;
		},

		changeHistoryData(params) {
			const { isMaterial, changeMaterialSearchHistory, changeTandianSearchHistory } = this;

			(isMaterial ? changeMaterialSearchHistory : changeTandianSearchHistory)?.(params);
		},

		emptySearch() {
			this.searchValue = '';

			this.isHistory = true;
			this.isHintStatus = '';
			this.currentPagetList = [];

			this.isFocus = true;
		},

		openSearchHistoryData(value) {
			this.searchValue = value;
			this.getSearchProductList(1);
		},

		getSearchProduct(params) {
			const { placeholder } = this;
			let value = params?.detail?.value ?? params;

			if (!placeholder && !value) {
				return;
			}

			!value && (value = placeholder);

			this.isSkelett = true;
			this.isHistory = false;
			this.searchValue = value;

			this.getSearchProductList(1);
			this.changeHistoryData(value);
		},

		getSearchProductList(pageIndex = this.requestParams.pageIndex) {
			const {
				isMaterial,
				coordinate,
				searchValue,
				currentSite: { id },
				requestParams: { pageSize }
			} = this;

			const params = Object.assign({
				...coordinate,

				pageSize,
				pageIndex,
				locationId: id,
				search: searchValue.replace(/\s/g, '')
			});
			console.log('🚀 ~ file: TabbarCommonSearch.vue ~ line 231 ~ getSearchProductList ~ params', params);

			getProductListNew(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}

				const { list, now } = data;
				const isPageIndex = pageIndex === 1;

				isPageIndex && this.Interval && clearInterval(this.Interval);

				const filterList = (list?.data || []).map((item) => {
					let { endTime, distance, commissionsList, ...otherParams } = item;
					let filtersDistance = distance;

					if (distance) {
						filtersDistance = distance < 1000 ? `${distance}m` : `${(distance / 1000).toFixed(2)}km`;
					}

					const diff = endTime - now;
					return Object.assign(
						{
							now,
							endTime,
							...otherParams,
							distance: filtersDistance,
							commissionsList: formatCommissionsModel(commissionsList)
						},
						diff < oneDayTime && {
							isActive: true,
							diffTime: diff
						}
					);
				});

				this.requestParams.pageIndex = pageIndex;
				this.currentPagetList = isPageIndex ? filterList : [...this.currentPagetList, ...filterList];

				this.$nextTick((e) => {
					this.isSkelett = false;
					const isSome = this.currentPagetList.some((item) => item.isActive);

					if (isSome) {
						this.Interval = setInterval((e) => {
							this.changeCountdown();
						}, 1000);
					}
				});

				this.isHintStatus = isPageIndex && !filterList.length ? 'nodata' : filterList.length < pageSize ? 'nomore' : '';
			});
		},

		changeCountdown() {
			let status = false;
			const { currentPagetList } = this;

			currentPagetList.forEach((item) => {
				const { isActive, diffTime } = item;

				if (isActive) {
					if (diffTime > 1000) {
						status = true;
						this.$set(item, 'diffTime', diffTime - 1000);
					} else {
						this.$set(item, 'isActive', false);
					}
				}
			});

			!status && clearInterval(this.Interval);
		}
	},

	components: {
		DistributionHint,
		DistributionProduct,
		DistributionMaterial
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	padding-top: 112rpx;
	@include Db_iosBottomDistance(0);

	&.isHistory {
		height: 100vh;
		background: #fff;
	}

	&-header {
		position: fixed;
		// #ifndef H5
		top: 0;
		// #endif

		// #ifdef H5
		top: 45px;
		// #endif

		left: 0;
		right: 0;
		height: 112rpx;
		background: #fff;
		z-index: 999;
		padding: 20rpx 40rpx 0;

		display: flex;
		align-items: center;

		&-left {
			flex: 1;
			position: relative;

			input {
				height: 72rpx;
				color: #333;
				font-size: 28rpx;
				border-radius: 20rpx;
				background: #f6f6f6;
				padding: 0 76rpx;
			}

			/deep/ .input-placeholder {
				color: #999;
				font-size: 28rpx;
			}

			image {
				position: absolute;
				top: 50%;
				width: 36rpx;
				height: 36rpx;
				transform: translateY(-50%);

				&:nth-child(1) {
					left: 24rpx;
				}

				&:nth-child(3) {
					right: 18rpx;
				}
			}
		}

		&-right {
			width: 86rpx;

			button {
				padding: 0;
				text-align: right;

				color: #333;
				font-size: 28rpx;
				font-weight: bold;

				height: 44rpx;
				line-height: 44rpx;
				background: transparent;

				&::after {
					display: none;
				}
			}
		}
	}

	&-history {
		padding: 0 40rpx;
		margin-top: 52rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			color: #292f36;
			font-size: 28rpx;
			font-weight: bold;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		&-main {
			// margin-top: 18rpx;

			display: flex;
			flex-wrap: wrap;

			&-item {
				color: #1f1f1f;
				font-size: 24rpx;

				border-radius: 12rpx;
				padding: 10rpx 16rpx;
				background: #f6f6f6;
				margin: 20rpx 20rpx 0 0;
				max-width: 670rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}

	&-product {
		padding: 24rpx 20rpx;
		background: #f9f9f9;
		position: relative;
		min-height: calc(100vh - 112rpx);
	}
}
</style>
